<template>
  <div class="specialLearn">
    <div class="top">
      <p class="learn">学习专题</p>
      <ly-tab v-model="selectedId" :items="items" :options="options" @change="handleChange"></ly-tab>
    </div>
    <Loading v-if="notMore" class="empty-text-wrap"/>
    <div class="loadMoreWrap">
      <mu-load-more @load="load" :loading="loading">
        <div class="content1">
          <div class="box" v-for="item of listData" :key="item.id" @click="video(item)">
            <div class="img">
              <img :src="item.photo" alt>
            </div>
            <div class="dec">
              <p>{{item.title}}</p>
              <div>
                <p>
                  <i class="iconfont iconxuexi_icon_shijian" style="color:#ccc;font-size:14px;"></i>
                  <span>{{item.learning_duration | conversionToMinute}}</span>
                </p>
                <p>
                  <i class="iconfont iconxuanchuan_icon_kanguo" style="color:#ccc;font-size:14px;"></i>
                  <span>{{item.people_num}}人看过</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </mu-load-more>
    </div>
    <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||listData.length<6}">{{loaded}}</div>
  </div>
</template>

<script>
import LyTab from "@cp/index";
import Loading from '@/components/emptyText.vue';
export default {
  components: {
    LyTab,
    Loading
  },
  data() {
    return {
      loaded: "加載更多...",
        loading:false,
        loadOver:false,
      notMore: false,
      listData: [],
      class_id: "1",
      type: "1",
      selectedId: 0,
      bottomSelectedId: 0,
      p: 1,
      items: [],
      options: {
        activeColor: "#fff",
        color: "rgba(255,255,255,.6)"
      }
    };
  },
  mounted() {
    this.$progress.done();
    this.init();
  },
  methods: {
    video(item) {
      this.$router.push({
        path: "/learn/specialInfo",
        query: { id: item.id, type: item.type }
      });
    },
    init() {
      this.$http
        .get("/applets/CourseClass/course_class", {
          org_id: JSON.parse(Cookies.get('user_71ydj')).organization_id
        })
        .then(res => {
          res.data.special_class.forEach(el => {
            this.items.push({ label: el.class_name, id: el.id, type: el.type });
          });

          this.class_id = this.items[0].id;
          this.type = this.items[0].type;
          this.initData(this.p);
        });
    },

    initData(p, class_id, type) {
      this.$http
        .get("/applets/Study/special_list", {
          p: this.p,
          page:6,
          class_id: this.class_id,
          type: this.type
        })
        .then(res => {
            if (res.data.length) {
                console.log(res.data)
                this.listData.push(...res.data);
            }
            this.loadOver = false;
            if (this.p != 1) {
                console.log(res.data);
                if (res.data.length) {
                    console.log(res.data)
                } else {
                    this.loadOver = true;
                    this.loading = false;
                    this.loaded = '没有更多数据了'
                    return false
                }
            } else {
                if (!res.data.length) {
                    this.notMore = true;
                    this.loadOver = false;
                } else {
                    if (res.data.length < 6 && res.data.length != 0) {
                        this.loadOver = true;
                        this.loaded = '没有更多数据了';
                        this.notMore =false;
                    }
                }
            }
          // if (res.data.length == 0) {
          //   this.loaded = "没有更多了";
          //   this.notMore = false;
          //   return;
          // }
          //
          // this.listData.push(...res.data);
          // if (res.data.length < 10) {
          //   this.loaded = "没有更多了";
          //   this.notMore = false;
          //   return;
          // }
        });
    },
    load() {
        if (!this.loadOver) {
            this.loading = true;
            clearTimeout(this.method);
            this.method = setTimeout(() => {
                this.p = this.p + 1;
                this.initData(this.p);
                this.loading = false;
            }, 1000);
        }
    },
    handleChange(item, index) {
      this.p = 1;
      this.class_id = item.id;
      this.type = item.type;
      this.listData = [];
      this.loaded = "加载更多...";
      this.notMore = false;
      this.loadOver =false;
      this.initData();
    }
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.top {
  background: url("~@as/img/xuexi_zhuanti_top@2x.png");
  background-size: 100% 100%;
  width: 100%;
  height: 229px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .learn {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-top: 73px;
    margin-left: 13px;
  }
}
.loadMoreWrap{
  margin-top: -50px;
  .content1 {
    width: 343px;
    margin-left: 17px;
    margin-right: 17px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    //  border:1px solid #000;
  }

}

.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 343px;
  height: 115px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 14px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
  .dec {
    margin: 0;
    width: 227px;
    height: 62px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > p {
      font-size: 13px;
      width: 100%;
      color: #333;
      height: 38px;
      margin: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    div {
      display: flex;
      justify-content: space-between;
      p {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999;
        margin: 0;
        span {
          margin-left: 3px;
        }
      }
    }
  }

  .img {
    position: relative;
    width: 73px;
    height: 62px;
    border-radius: 8px;
    img {
      width: 73px;
      height: 62px;
      border-radius: 4px;
    }
    div {
      width: 44px;
      height: 20px;
      position: absolute;
      top: 0;
      right: 0;
      border-radius: 0 4px 0 4px;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right, #eb4d44, #f47548);
      color: #fff;
    }
  }
}

.loading {
  width: 100%;
  font-size: 14px;
  color: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  &.notPageOne {
    margin-top: -40px;
  }
}
.empty-text-wrap {
  width: 100%;
  height: 40vh;
  margin-top: 10vh;
}

.mu-load-more /deep/ .mu-circle-spinner{
  border-color: #e5e5e5;
}
.specialLearn /deep/.mu-elevation-1{
  box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
  -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
}
</style>